import React, { Component } from 'react';
import { Form, Input, Select } from 'antd';
import './modal.css';

const { Option } = Select;

class AddUserForm extends Component {

  //formRef = React.createRef<FormInstance>();

  onFinish = values => {
    console.log(values);
  };

  render() {
    const layout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
    };
    return (
      <div>
        <h1 className='title'>基本信息</h1>
        <Form 
          {...layout} 
          //ref={this.formRef}   可以通过ref获取数据域
          name="control-ref" 
          onFinish={this.onFinish}
        >    
          <Form.Item 
            name="name" 
            label="姓名" 
            rules={[{ required: true }]}
          >
            <Input placeholder="请输入用户姓名"/>
          </Form.Item>

          <Form.Item 
            name= "email" 
            label="邮箱" 
            rules={[{ required: true,type: 'email' }]}>
            <Input placeholder="请输入电子邮箱"/>
          </Form.Item>

          <Form.Item 
            name="position" 
            label="职位" 
            rules={[{ required: true }]}
          >
            <Select
              placeholder="请选择职位"
              onChange={this.onGenderChange}
              allowClear
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="phone"
            label="手机号码"
            rules={[{ required: true, message: '请输入手机号码!' }]}
          >
            <Input placeholder="请输入手机号码"/>
          </Form.Item>

          <Form.Item 
            name="organize" 
            label="所属组织" 
            rules={[{ required: true }]}
          >
            <Select
              placeholder="请选择所属组织"
              onChange={this.onGenderChange}
              allowClear
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>

        </Form>
      </div>
      
    )
  }
}

export default AddUserForm;